<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
    *{      
      -webkit-touch-callout: auto; /* prevent callout to copy image, etc when tap to hold */      
      -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */      
      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */       
      -webkit-user-select:none;
    }  
    html,body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      max-width: 500px;
    }
    #ball {
      position: absolute;
      left: 200px;
      top: 100px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
      background: red;
      transform-origin: 0 100px;
    }
  </style>
</head>
<body>
  <button id="speedUp">Speed Up</button>
  <button id="slowDown">Slow Down</button>
  <button id="reverse">Reverse</button>
  <button id="pause">Stop</button>
  <div id="ball"></div>
  <script src="/js/sprite-timeline.js"></script>
  <script>
    const T = 2000
    let timeline
    const ball = document.getElementById('ball'),
      speedUp = document.getElementById('speedUp'),
      slowDown = document.getElementById('slowDown'),
      reverse = document.getElementById('reverse'),
      pause = document.getElementById('pause')

    requestAnimationFrame(function update() {
      if(!timeline) timeline = new Timeline()
      const rotation = 360 * timeline.currentTime / T
      ball.style.transform = `rotate(${rotation}deg)`
      requestAnimationFrame(update)
    })

    speedUp.onclick = function () {
      if(timeline) timeline.playbackRate += 0.2
    }

    slowDown.onclick = function () {
      if(timeline) timeline.playbackRate -= 0.2
    }

    reverse.onclick = function () {
      if(timeline) timeline.playbackRate = -timeline.playbackRate
    }

    pause.onclick = function () {
      if(timeline) timeline.playbackRate = 0
    }
  </script>
</body>
</html>